<template>
	<view class="page__bd">
		<view class="padding">
			<hb-circle text="80%" :value="value" ctx-id="hb-ctx_1" />
		</view>
		<view class="padding">
			<hb-circle :value="value" :size="150" ctx-id="hb-ctx_2" :clockwise="false" fill="#67C23A" :color="color" layer-color="#8799a3"
			 :stroke-width="8">
				<slot>{{value>0?value:"改变颜色"}}</slot>
			</hb-circle>
		</view>
		<view class="padding">
			<button class="hb-btn hb-btn_primary" data-step="10" @click="run">增加</button>
			<button class="hb-btn hb-btn_error margin-left-xs" data-step="-10" @click="run">减少</button>
			<button class="hb-btn hb-btn_warning margin-left-xs" data-step="-10" @click="runColor">改变颜色</button>
		</view>
	</view>
</template>

<script>
	import hbCircle from "@/components/hb-circle/index"
	const format = rate => Math.min(Math.max(rate, 0), 100);
	export default {
		components: {
			hbCircle
		},
		data() {
			return {
				value: 0,
				color: "#ee0a24"
			}
		},
		onLoad() {
			let that = this;
			setTimeout(function() { //必须延迟执行 不然H5不显示
				for (let i = 0; i <= 3; i++) {
					that.value = format((that.value += 10))
				}
			}, 200)
		},
		methods: {
			run(event) {
				const step = parseFloat(event.currentTarget.dataset.step);
				this.value = format((this.value += step))
			},
			runColor() {
				const color = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C"];
				this.color = color[2]
			}
		}
	}
</script>

<style>
</style>
